<template>
	<view>
		<view class="videoMain">
			<view class="nameInput">
				<uni-easyinput Styles Options="#911" :inputBorder="false" :styles="styles" placeholder="音频名称:"
					v-model="videoMain.videoName" color="#acacac"></uni-easyinput>
			</view>
			<view class="titleInput">
				<uni-easyinput :inputBorder="false" :styles="styles" placeholder="音频介绍:" v-model="videoMain.content">
				</uni-easyinput>
			</view>

			<uni-data-select class="titleType" v-model="typeId" :localdata="selectType"
				placeholder="音频类型"></uni-data-select>

			<view class="">
			</view>
			<view class="bgImg">
				<img class="img1" :src="imgSrc1" @click="onImg1(item)" />
				<img class="img2" :src="imgSrc2" @click="onImg2(item)" />
			</view>
			<view class="text">
				<view class="a">
					前景图
				</view>
				<view class="b">
					背景图
				</view>
			</view>
		</view>
		<u-divider></u-divider>

		<view class="videoPlayer">
			<view class="inpt">
				<view class="">
					<uni-easyinput :inputBorder="false" :styles="styles" placeholder="第几集:"
						v-model="videoPalyer.level"></uni-easyinput>
				</view>
				<view class="">
					<uni-easyinput :inputBorder="false" :styles="styles" placeholder="本集简介:"
						v-model="videoPalyer.content"></uni-easyinput>
				</view>
				<view class="">
					<uni-easyinput :inputBorder="false" :styles="styles" placeholder="解锁所需金额:"
						v-model="videoPalyer.moeny"></uni-easyinput>
				</view>

			</view>
			<img class="img4" :src="imgSrc3" @click="onImg4(item)" />
			<view class="top">
				<view class="text">
					选择音频
				</view>
				<view class="btn">
					<view class="add">
						<button class="mini-btn" type="primary" size="mini" style="background-color: #6d6252;" @click="saveData">新增</button>
					</view>
					<view class="delete">
						<button class="mini-btn" type="warn" size="mini" style="background-color: #6d6252;" @click="del()">删除</button>
					</view>
				</view>

			</view>



			<view class="uni-container">
				<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据"
					@selection-change="selectionChange" class="table" style="border-collapse: collapse;">
					<uni-tr>
						<uni-th width="50" style=" overflow:hidden; width: 60rpx; " align="center">集数</uni-th>
						<uni-th width="100" style=" overflow:hidden; width: 100rpx;" align="center">音频</uni-th>
						<uni-th width="100" style=" overflow:hidden; width: 100rpx;" align="center">简介</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index" class="text">
						<uni-td align="center">
							<view class="level" width="50" style=" overflow:hidden; width: 60rpx;">
								{{ item.level }}
							</view>
						</uni-td>
						<uni-td>
							<view class="video" width="100" style=" overflow:hidden; width: 150rpx;">
								{{ item.video }}
							</view>
						</uni-td>
						<uni-td align="center" width="100" style=" overflow:hidden; width: 100rpx;">
							<view class="content">
								{{ item.content }}
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="text" style="color: darkgrey;">
				共计上传：{{tableData.length}} 集
			</view>
			<button class="mini-btn" type="primary" style="background-color: #6d6252;" @click="onSubmit">提交</button>

		</view>

	</view>
</template>

<script>
	import {
		selectAll,
		login,
		saveData
	} from "../../config/api.js"
	import {
		baseUrl
	} from '../../config/requertUrl.js';
	export default {
		data() {
			return {
				selectedIndexs: {}, // 选中数据
				imgSrc1: "http://imcdn.shimaruanchuang.cn/chat/1707988936804mAaut3fV8Bqc2617310e6026e6359d1643d486399a9a.png",
				imgSrc2: "http://imcdn.shimaruanchuang.cn/chat/1707988936804mAaut3fV8Bqc2617310e6026e6359d1643d486399a9a.png",
				imgSrc3: "http://imcdn.shimaruanchuang.cn/chat/1707988936804mAaut3fV8Bqc2617310e6026e6359d1643d486399a9a.png",
				tableData: [], //表格内所有数据
				deleteobj: [], //获取已选的索引，用于删除
				selectDatas: [], //选中的数据
				selectType: [],
				hand: "",
				player: "",
				video: "",
				typeId: 0,
				videoId: 0,
				creaTeime: 0,
				videoMain: {
					id: 0,
					videoName: "", //音频名称
					content: "", //音频介绍
					imgHand: "", //音频封面图
					imgPlayer: "", //音频背景图
					userId: 0
				},
				videoPalyer: {

					videoId: 0, // 关联主表id 
					moeny: "", //需要多少钱或积分才可以解锁，0代表免费
					video: "", // 音频播放地址
					level: null, //对应第几集
					content: "", //本集简介
				},

				styles: {
					color: '#dadada',
					borderColor: '#999999',
				},
			};
		},
		onShow() {
			this.selectAllFun();

		},
		methods: {

			//点击提交
			onSubmit() {
				this.creaTeime = Date.now();
				this.saveDataPIFun();
			},
			// 点击加入历史页面接口
			saveDataPIFun() {
				let that = this;
				let param = {
					imgHand: that.videoMain.imgHand,
					imgPlayer: that.videoMain.imgPlayer,
					content: that.videoMain.content,
					typeId: that.typeId,
					videoName: that.videoMain.videoName,
					createTime: that.creaTeime,
					videoPlayerInfos: that.tableData
				}

				if (param.videoName == null || param.videoName == "") {
					uni.showToast({
						title: "请输入音频名称",
						icon: "error"
					})
					return;
				}
				if (param.typeId == null || param.typeId == "") {
					uni.showToast({
						title: "请选择音频类型",
						icon: "error"
					})
					return;
				}
				if (param.imgHand == null || param.imgHand == "") {
					uni.showToast({
						title: "请选择前景图",
						icon: "error"
					})
					return;
				}

				if (param.videoPlayerInfos == null || param.videoPlayerInfos == "") {
					uni.showToast({
						title: "请新增音频信息",
						icon: "error"
					})
					return;
				}


				saveData(param, {
					custom: {
						auth: true
					}
				}, ).then((res) => {
					console.log("res:", res);
					if (res.code == 200) {
						uni.showToast({
							title: "上传成功",
							icon: "none"
						})
						uni.switchTab({
							url: '/pages/index/index'
						})

						that.tableData = [];

						return;
					}
					uni.navigateTo({
						url:"/pages/my/my"
					})

				}).catch(() => {
					console.log("请求失败了")
				})

			},

			// saveVideoMainFun() {
			// 	let param = {
			// 		imgHand: this.videoMain.imgHand,
			// 		imgPlayer: this.videoMain.imgPlayer,
			// 		content: this.videoMain.content,
			// 		typeId: this.typeId,
			// 		videoName: this.videoMain.videoName,
			// 		createTime: this.creaTeime
			// 	}
			// 	saveVideoMain({
			// 		custom: {
			// 			auth: true,
			// 			loading: false
			// 		},
			// 		params: param
			// 	}).then((res) => {
			// 		console.log(res);
			// 	}).catch((e) => {})
			// },
			//删除
			del() {
				let that = this
				var objectsToRemove = that.selectDatas
				that.tableData = that.tableData.filter(function(item) {
					return !objectsToRemove.includes(item);
				})
				console.log(that.tableData);
				that.selectDatas = [];
			},
			//多选
			selectionChange(e) {
				//你没有分析对他的数据结构
				//选择后 表格自动传入到这个方法里的数据结构是这样的：
				/**
				 * { 
				 *  detail:{
				 *      index:[0,1,2]   //这个是已选的索引   
				      }
				 }
				 */
				//先清空上次选择的内容
				this.selectDatas = [];
				//获取到已选的所有表格自带的索引  是个数组  也是上边detail.index的数组
				let selectIndexs = e.detail.index
				this.deleteobj = selectIndexs
				console.log("已选索引", this.deleteobj)
				//循环每个选择的索引
				for (var i = 0; i < selectIndexs.length; i++) {
					//当前循环到的索引
					let thisSelectIndex = selectIndexs[i];
					//往已选中的数组中 添加进去  表格中的第i个索引的数
					this.selectDatas.push(this.tableData[thisSelectIndex])
				}
				console.log("已选", this.selectDatas)

			},
			saveData() {
				if (this.videoPalyer.level == null || this.videoPalyer.level == "") {
					uni.showToast({
						title: "请输入第几集",
						icon: "error"
					})
					return;
				}
				if (this.videoPalyer.video == null || this.videoPalyer.video == "") {
					uni.showToast({
						title: "请选择音频",
						icon: "error"
					})
					return;
				}
				this.tableData.push(this.videoPalyer);
				console.log(this.tableData);
				this.videoPalyer = {
					videoId: 0, // 关联主表id 
					moeny: 0, //需要多少钱或积分才可以解锁，0代表免费
					video: "", // 音频播放地址
					level: null, //对应第几集
					content: "", //本集简介
					create_time: "",
				};
				this.imgSrc3 = "http://imcdn.shimaruanchuang.cn/chat/1707988936804mAaut3fV8Bqc2617310e6026e6359d1643d486399a9a.png"
			},
			//下拉框
			selectAllFun() {
				let that = this;
				let param = {}
				selectAll({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					let data = res.data;
					//先清空下拉框的数组   防止页面每次加载都循环添加数据   会导致数据重复
					that.selectType = []
					//再循环格式化数据给下拉框的数据数组
					for (var i = 0; i < data.length; i++) {
						//push方法是给数组追加元素    我这里是每次循环都追加一个  json元素  
						that.selectType.push({
							text: data[i].typeName,
							value: data[i].id
						})
					}
				}).catch((e) => {})
			},

			onImg1(e) {
				let that = this
				uni.chooseImage({

					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log(tempFilePaths);
						uni.uploadFile({
							url: baseUrl + 'auth/common/upload', //阿里云接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (tempFilePaths) => {
								that.hand = JSON.parse(tempFilePaths.data)
								that.videoMain.imgHand = that.hand.data
								that.imgSrc1 = that.videoMain.imgHand
								console.log(that.videoMain.imgHand);
							},
							fail(e) {
								console.log(e);
							}
						});
					}
				});
			},

			onImg2(e) {
				let that = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log(tempFilePaths);
						uni.uploadFile({
							url: baseUrl + 'auth/common/upload', //阿里云接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (tempFilePaths) => {
								that.player = JSON.parse(tempFilePaths.data)
								that.videoMain.imgPlayer = that.player.data
								that.imgSrc2 = that.videoMain.imgPlayer
								console.log(that.videoMain.imgPlayer);
							},
							fail(e) {
								console.log(e);
							}
						});
					}
				});
			},

			onImg4(e) {
				let that = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log(tempFilePaths);
						uni.uploadFile({
							url: baseUrl + 'auth/common/upload', //阿里云接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (tempFilePaths) => {
								that.video = JSON.parse(tempFilePaths.data)
								that.videoPalyer.video = that.video.data
								// that.imgSrc3 = that.videoPalyer.video
								console.log(that.videoPalyer.video);
							},
							fail(e) {
								console.log(e);
							}
						});
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #222222;
	}

	.videoMain {
		width: 660rpx;

		position: relative;
		/* 相对于其正常文档流进行定位 */
		left: 45rpx;

		.titleType {
			border: none;
			color: #000000;
		}

		.bgImg {
			display: flex;

			.img1 {
				padding-left: 70rpx;
				padding-top: 5rpx;
				width: 240rpx;
				height: 240rpx;
			}

			.img2 {
				padding-left: 40rpx;
				padding-top: 5rpx;
				width: 240rpx;
				height: 240rpx;
			}
		}

		.text {
			color: #666666;
			display: flex;
			padding-top: 5rpx;
			font-size: 25rpx;

			.a {
				padding-left: 150rpx;
			}

			.b {
				padding-left: 208rpx;
			}
		}
	}

	.videoPlayer {
		width: 660rpx;
		position: relative;
		/* 相对于其正常文档流进行定位 */
		left: 45rpx;

		.uni-container {
			width: 100%;
			/* 确保包裹表格的容器也有合适的宽度 */

		}

		.img4 {
			padding-left: 75rpx;
			width: 240rpx;
			height: 240rpx;
		}

		.top {
			display: flex;

			.text {
				color: #666666;
				padding-top: 5rpx;
				padding-left: 140rpx;
				font-size: 25rpx;
			}

			.btn {
				display: flex;

				.add {
					position: relative;
					/* 相对于其正常文档流进行定位 */
					left: 140rpx;

				}

				.delete {
					position: relative;
					/* 相对于其正常文档流进行定位 */
					left: 150rpx;
				}
			}
		}
	}
</style>